<template>
    <div class="container-content">
        <div class="container-content-title">{{ $t('platform.setting.ip.title') }} (Api)
            <div class="flex" v-if="dataStatus == 'dle'">
                <el-button type="text" class="p-0" @click="dialogSync">{{ $t('action.sync') }}</el-button>
                <el-button type="text" class="p-0" @click="dialogUpdate" v-if="data.ips.length">{{ $t('action.edit') }}</el-button>
            </div>
        </div>
        <component-page-loading :status="dataStatus" v-if="['loading', 'error'].indexOf(dataStatus) >= 0" @reload="getData"></component-page-loading>
        <component-page-loading status="nodata" nodata-init @create="dialogUpdate" v-else-if="!data.ips.length"></component-page-loading>
        <el-form label-width="180px" class="detail" v-else>
            <el-form-item :label="$t('platform.setting.ip.ips')">
                <div class="flex flex-wrap">
                    <span v-for="(item,index) in data.ips" :key="index" class="mr-3">{{ item.ip }}</span>
                </div>
            </el-form-item>
        </el-form>
        <el-dialog :title="$t('platform.setting.ip.dialog.update')" width="520px" :visible.sync="dialog.visible.update">
            <vue-simplebar>
                <el-form :model="dataCache" label-width="110px" v-if="dataCache.ips != null">
                    <el-form-item v-for="(item, index) in dataCache.ips" :key="index" :label="$t('platform.setting.ip.ips') + (index+1)"
                                  :error="Boolean(msg.errors[`ips.${index}.ip`]) ? msg.errors[`ips.${index}.ip`][0] : ''
                                       || Boolean(msg.errors['ips']) ? msg.errors['ips'][0] : ''" required>
                        <el-col :span="18">
                            <el-input v-model="item.ip"></el-input>
                        </el-col>
                        <el-col :span="3" class="text-center">
                            <el-button size="small" icon="el-icon-close" circle @click="removeItem(index)"></el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item :label="!dataCache.ips.length ? $t('platform.setting.ip.ips') : ''">
                        <el-button size="small" @click="addItem">{{ $t('action.add') }}</el-button>
                    </el-form-item>
                </el-form>
            </vue-simplebar>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible.update = false">{{ $t('action.cancel') }}</el-button>
                <el-button type="primary" @click="onSubmit">{{ $t('action.confirm') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('platform.setting.ip.dialog.sync')" width="520px" :visible.sync="dialog.visible.sync">
            <div class="pr-3">
                <el-form :model="dataSync" label-width="auto">
                    <div class="mb-6">
                        <el-alert type="warning" :title="$t('platform.setting.ip.sync.desc')" :closable="false"></el-alert>
                    </div>
                    <el-form-item :label="$t('platform.setting.ip.sync.source')" :error="Boolean(msg.errors['sourcePlatCode']) ? msg.errors['sourcePlatCode'][0] : ''" required>
                        <component-page-org-tree-option v-model="dataSync.sourcePlatCode" block></component-page-org-tree-option>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.ip.sync.target')">
                        <el-tag effect="plain" size="mini" type="info">{{ tree.name }}</el-tag>
                    </el-form-item>
                    <el-form-item :label="$t('platform.setting.ip.sync.type')" :error="Boolean(msg.errors['type']) ? msg.errors['type'][0] : ''">
                        <el-radio-group v-model="dataSync.type">
                            <el-radio :label="item.value" v-for="(item,index) in $t('platform.setting.ip.sync.types')" :key="index">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible.sync = false">{{ $t('action.cancel') }}</el-button>
                <el-button type="primary" @click="onSync">{{ $t('action.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "PlatformIp",
    props: ['tree'],
    data() {
        return {
            dataStatus: 'dle',
            data: {
                plat_code: null,
                ips: [],
            },
            dataCache: {},
            dataSync: {
                sourcePlatCode: '',
                targetPlatCode: '',
                type: 1,
            },
            dialog: {
                visible: {
                    update: false,
                    sync: false,
                }
            },
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
        }
    },
    watch: {
        tree: {
            deep: true,
            immediate: true,
            handler(n, o) {
                // 获取数据
                n.id != null && this.getData();
            }
        },
    },
    methods: {
        // 获取数据
        getData() {
            this.dataStatus = 'loading';
            axios.get('/platform/setting/ip/getData', {
                params: {
                    plat_code: this.tree.code
                }
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.data.ips = response.data.resp_data;
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        // 显示模态框（编辑）
        dialogUpdate() {
            this.initMsg();
            // 缓存数据
            this.dataCache = _.cloneDeep(this.data);
            // 平台code
            this.dataCache.plat_code = this.tree.code;
            // 显示模态框
            this.dialog.visible.update = true;
        },
        // 显示模态框（同步）
        dialogSync() {
            this.initMsg();
            // 平台code
            this.dataSync.targetPlatCode = this.tree.code;
            // 显示模态框
            this.dialog.visible.sync = true;
        },
        addItem() {
            this.dataCache.ips.push({ip: null});
        },
        removeItem(index) {
            this.dataCache.ips.splice(index, 1);
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/ip/updateOrCreate', this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.edit')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data.ips = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.update = false;
                } else if (response.data.resp_msg.code == 42000) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.edit')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        onSync() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/setting/ip/sync', this.dataSync).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.sync')}),
                        showClose: true
                    });
                    // 更新数据
                    this.data.ips = response.data.resp_data;
                    // 关闭模态框
                    this.dialog.visible.sync = false;
                } else if (response.data.resp_msg.code == 42000) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.edit')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        }
    }
}
</script>

<style scoped>
::v-deep .el-dialog__body {
    padding-top: 15px;
    padding-bottom: 15px;
    height: 360px;
}
</style>
